/*
    @mixin 需要配合 @include 使用
    使用 @mixin 来申明公共样式
    @mixin 只会复用指定的样式
    @mixin 还会通过参数功能引入变量，类似于一个函数的方式来复用样式
    @mixin 可以配合 @supports @media @contents 使用来增加灵活性
*/

@mixin button {
    font-size: 16px;
    color: #07a123;
}

// 通过参数使用变量
@mixin button_fun($color, $width: 200px) {
    font-size: 14px;
    background-color: blue;
    color: $color;
    width: $width;
}
// 通过参数设置样式
@mixin set_style_fun($colorName, $opactiy: 1) {
    // color: var(--#{$colorName}RGB);
    // color: rgba($color: var(--#{$colorName}RGB), $alpha: $opactiy);
    // background: rgba($color: $colorName, $alpha: $opactiy);
    color: rgba($color: $colorName, $alpha: $opactiy);
    // opacity: $opactiy;
    // background-
}

// 
@mixin bg_color() {
    background-color: #3f8e46;
    [data-theme="theme1"] & {
        background-color: red;
        color: white;
        font-size: 20px;
    }
    [data-theme="theme2"] & {
        background-color: yellow;
        color: black;
        font-size: 30px;
    }
    [data-theme="theme3"] & {
        background-color: skyblue;
        color: red;
        font-size: 40px;
    }
}

// 

